<template>
    <div class="statistic-container">
    <el-statistic class="statistic" :value="outputValue">
      <template #title>
        <div class="title">
          当前用户总积分
        </div>
      </template>
    </el-statistic>
  </div>
</template>
<script setup>
import { userGetById } from "@/apis/user/user";
import { ref, reactive, onMounted } from "vue";
import { useTransition } from '@vueuse/core'

// 数据
const userData = ref([]);

// 数据显示控制 
const source = ref(0)
const outputValue = useTransition(source, {
  duration: 1500,
})

// 根据Id查用户
const getUser = () => {
  userGetById().then((result) => {
    userData.value = result.data
    source.value = Number(userData.value.score)
    // console.log(Number(userData.value.score));
  });
};

// 页面加载时执行
onMounted(() => {
  getUser();
});
</script>

<style scoped>
.statistic-container {
  display: flex;
  justify-content: center; /* 水平居中 */
}

.statistic {
  text-align: center; /* 文字居中 */
}
.title {
  margin-top: 20px;
  font-size: 30px;
  padding: 20px;
}
</style>
